<!--
 * @Description: 新建场景页面
 * @Author: 崔堂袁
 * @Date: 2021-04-16 16:12:00
 * @LastEditTime: 2021-05-05 14:22:34
-->
<template>
  <div class="new-design">
    <!-- 顶部工具栏 -->
    <newDesignHeader ref="newDesignHeader"
                     @saveThreeComponents="saveThreeComponents"></newDesignHeader>
    <!-- 左侧功能区 -->
    <newDesignLeft ref="newDesignLeft"
                   @createMode="createMode"></newDesignLeft>
    <!-- 中间画布 -->
    <newDesignMiddleCanvas ref="newDesignMiddleCanvas"
                           @toAttributes="toAttributes"
                           @saveStatus="saveStatus"></newDesignMiddleCanvas>
  </div>
</template>

<script>
import { onMounted, getCurrentInstance, ref } from 'vue'
import newDesignHeader from './newDesignComponents/newDesignHeader'
import newDesignLeft from './newDesignComponents/newDesignLeft'
import newDesignMiddleCanvas from './newDesignComponents/newDesignMiddleCanvas'
export default {
  components: {
    newDesignHeader,
    newDesignLeft,
    newDesignMiddleCanvas
  },
  setup () {
    const { proxy } = getCurrentInstance()
    const newDesignMiddleCanvas = ref()
    const newDesignHeader = ref()
    onMounted(() => {
      // 验证是否登录
      if (!sessionStorage.getItem('loginState')) { // 没有登录，回到欢迎界面
        proxy.$router.push('/welcome')
      }
    })
    const createMode = () => {
      newDesignMiddleCanvas.value.createModel()
    }
    const newDesignLeft = ref()
    const toAttributes = () => {
      newDesignLeft.value.toAttributes()
    }
    const saveThreeComponents = () => {
      newDesignMiddleCanvas.value.saveThreeComponents()
    }
    const saveStatus = (status) => {
      newDesignHeader.value.saveStatus(status)
    }

    return {
      createMode,
      newDesignMiddleCanvas,
      toAttributes,
      newDesignLeft,
      saveThreeComponents,
      saveStatus,
      newDesignHeader
    }
  }
}
</script>

<style lang='less' scoped>
.new-design {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
</style>
